<template>
  <view class="family-container">
    <view class="family-header">
      <text class="title">家校共育</text>
    </view>
    
    <view class="family-content">
      <view class="parent-section">
        <view class="section-header">
          <text class="section-title">家长信息</text>
          <text class="section-more" @click="editParentInfo">编辑</text>
        </view>
        
        <view class="parent-info-card">
          <view class="parent-avatar">
            <text class="avatar-text">{{ parentInfo.name?.substring(0, 1) || '家' }}</text>
          </view>
          
          <view class="parent-details">
            <view class="detail-item">
              <text class="detail-label">姓名：</text>
              <text class="detail-value">{{ parentInfo.name || '未设置' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">手机号：</text>
              <text class="detail-value">{{ parentInfo.phone || '未设置' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">关系：</text>
              <text class="detail-value">{{ parentInfo.relation || '未设置' }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="notifications-section">
        <view class="section-header">
          <text class="section-title">家校通知</text>
          <text class="section-more" @click="viewAllNotifications">查看全部</text>
        </view>
        
        <view class="notifications-list">
          <view class="notification-item" v-for="notification in notifications" :key="notification.id">
            <view class="notification-icon">
              <view class="icon-circle" :class="notification.type"></view>
            </view>
            
            <view class="notification-content">
              <text class="notification-title">{{ notification.title }}</text>
              <text class="notification-time">{{ notification.time }}</text>
            </view>
            
            <view class="notification-status" v-if="!notification.read">
              <view class="unread-dot"></view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="reports-section">
        <view class="section-header">
          <text class="section-title">学习报告</text>
        </view>
        
        <view class="reports-list">
          <view class="report-card" v-for="report in reports" :key="report.id" @click="viewReport(report.id)">
            <view class="report-header">
              <text class="report-title">{{ report.title }}</text>
              <text class="report-date">{{ report.date }}</text>
            </view>
            
            <view class="report-preview">
              <text class="preview-text">{{ report.preview }}</text>
            </view>
            
            <view class="report-footer">
              <text class="view-more">查看详情 →</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { api } from '@/api';

const parentInfo = ref({
  name: '',
  phone: '',
  relation: ''
});

const notifications = ref([
  {
    id: 1,
    title: '本周学习表现报告已生成',
    time: '2024-01-22 10:30',
    type: 'report',
    read: false
  },
  {
    id: 2,
    title: '新的学习任务已布置',
    time: '2024-01-21 15:45',
    type: 'task',
    read: true
  },
  {
    id: 3,
    title: '家长会通知',
    time: '2024-01-20 09:15',
    type: 'meeting',
    read: false
  }
]);

const reports = ref([
  {
    id: 1,
    title: '2024年第4周学习报告',
    date: '2024-01-22',
    preview: '本周学习表现优异，完成了12个单词学习任务，正确率达到95%...'
  },
  {
    id: 2,
    title: '2024年第3周学习报告',
    date: '2024-01-15',
    preview: '本周学习较为认真，单词记忆有明显进步，但需要加强复习频率...'
  }
]);

// 加载家长信息
const loadParentInfo = async () => {
  try {
    // 实际项目中应该从API获取数据
    // const res = await api.family.getParentInfo();
    // parentInfo.value = res.data;
    
    // 模拟数据
    parentInfo.value = {
      name: '张三',
      phone: '138****1234',
      relation: '父亲'
    };
  } catch (error) {
    console.error('加载家长信息失败', error);
    uni.showToast({ title: '加载失败', icon: 'none' });
  }
};

// 编辑家长信息
const editParentInfo = () => {
  uni.navigateTo({
    url: '/pages/family/editParent'
  });
};

// 查看所有通知
const viewAllNotifications = () => {
  uni.navigateTo({
    url: '/pages/family/notifications'
  });
};

// 查看报告
const viewReport = (reportId) => {
  uni.navigateTo({
    url: `/pages/family/reportDetail?id=${reportId}`
  });
};

onMounted(() => {
  loadParentInfo();
});
</script>

<style scoped>
.family-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #FFF5F7;
  position: relative;
  overflow: hidden;
}

/* 装饰背景元素 */
.family-container::before,
.family-container::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.2;
  z-index: 0;
}

.family-container::before {
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background-color: #FF85A2;
  animation: float 8s ease-in-out infinite;
}

.family-container::after {
  bottom: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  background-color: #B794F4;
  animation: float 10s ease-in-out infinite reverse;
}

.family-header {
  padding: 40rpx 40rpx 30rpx 40rpx;
  background: linear-gradient(135deg, #FF85A2, #FFADC6);
  box-shadow: 0 4rpx 20rpx rgba(255, 133, 162, 0.3);
  border-radius: 0 0 30rpx 30rpx;
  margin-bottom: 40rpx;
  animation: floatSoft 3s ease-in-out infinite;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2rpx 4rpx rgba(255, 133, 162, 0.3);
  letter-spacing: 2rpx;
}

.family-content {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.parent-section,
.notifications-section,
.reports-section {
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 0 10rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #4A4A4A;
  position: relative;
  padding-left: 24rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12rpx;
  height: 30rpx;
  background: linear-gradient(135deg, #FF85A2, #FFADC6);
  border-radius: 6rpx;
}

.section-more {
  font-size: 28rpx;
  color: #FF85A2;
  transition: all 0.3s ease;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.section-more:active {
  background: rgba(255, 133, 162, 0.1);
  transform: scale(0.95);
}

.parent-info-card {
  display: flex;
  align-items: center;
  padding: 40rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 133, 162, 0.15);
  backdrop-filter: blur(10px);
  border: 2rpx solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  margin-bottom: 36rpx;
}

.parent-info-card:active {
  transform: translateY(2rpx);
  box-shadow: 0 6rpx 18rpx rgba(255, 133, 162, 0.1);
}

.parent-avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF85A2, #FFADC6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 36rpx;
  box-shadow: 0 6rpx 20rpx rgba(255, 133, 162, 0.3);
  animation: floatSoft 3s ease-in-out infinite;
}

.avatar-text {
  font-size: 56rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(255, 133, 162, 0.3);
}

.parent-details {
  flex: 1;
}

.detail-item {
  margin-bottom: 20rpx;
  padding: 8rpx 0;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-size: 28rpx;
  color: #8A8A8A;
  letter-spacing: 1rpx;
}

.detail-value {
  font-size: 30rpx;
  color: #4A4A4A;
  font-weight: bold;
  letter-spacing: 1rpx;
}

.notifications-list,
.reports-list {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(255, 133, 162, 0.15);
  backdrop-filter: blur(10px);
  border: 2rpx solid rgba(255, 255, 255, 0.6);
  margin-bottom: 36rpx;
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 36rpx 40rpx;
  border-bottom: 1rpx solid #FFF0F5;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.notification-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4rpx;
  background: transparent;
  transition: all 0.3s ease;
}

.notification-item:active {
  background: rgba(255, 133, 162, 0.05);
}

.notification-item:active::before {
  background: linear-gradient(180deg, #FF85A2, #FFADC6);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-icon {
  margin-right: 20rpx;
}

.icon-circle {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #BDBDBD;
  box-shadow: 0 0 0 8rpx rgba(255, 133, 162, 0.1);
}

.icon-circle.report {
  background-color: #FF85A2;
  box-shadow: 0 0 0 8rpx rgba(255, 133, 162, 0.2);
}

.icon-circle.task {
  background-color: #9AE6B4;
  box-shadow: 0 0 0 8rpx rgba(154, 230, 180, 0.2);
}

.icon-circle.meeting {
  background-color: #FFD6A5;
  box-shadow: 0 0 0 8rpx rgba(255, 214, 165, 0.2);
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 32rpx;
  color: #4A4A4A;
  margin-bottom: 8rpx;
  display: block;
  font-weight: 500;
}

.notification-time {
  font-size: 26rpx;
  color: #BDBDBD;
  letter-spacing: 0.5rpx;
}

.notification-status {
  margin-left: 20rpx;
}

.unread-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #FF85A2;
  box-shadow: 0 2rpx 8rpx rgba(255, 133, 162, 0.3);
}

.report-card {
  padding: 36rpx 40rpx;
  border-bottom: 1rpx solid #FFF0F5;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.report-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4rpx;
  background: transparent;
  transition: all 0.3s ease;
}

.report-card:active {
  background: rgba(255, 133, 162, 0.05);
  transform: translateX(8rpx);
}

.report-card:active::before {
  background: linear-gradient(180deg, #FF85A2, #FFADC6);
}

.report-card:last-child {
  border-bottom: none;
}

.report-card:last-child {
  border-bottom: none;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.report-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #4A4A4A;
  letter-spacing: 1rpx;
}

.report-date {
  font-size: 26rpx;
  color: #BDBDBD;
  background: rgba(255, 133, 162, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
}

.report-preview {
  margin-bottom: 16rpx;
}

.preview-text {
  font-size: 28rpx;
  color: #8A8A8A;
  line-height: 42rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 20rpx 0;
  letter-spacing: 0.5rpx;
}

.report-footer {
  text-align: right;
}

.view-more {
  font-size: 28rpx;
  color: #FF85A2;
  font-weight: 500;
  letter-spacing: 1rpx;
  padding: 6rpx 0;
  position: relative;
}

.view-more::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60rpx;
  height: 2rpx;
  background: linear-gradient(90deg, #FF85A2, transparent);
  transition: all 0.3s ease;
}

.report-card:active .view-more::after {
  width: 100%;
}

/* 动画效果 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
</style>